<template>
  <div class="container">
    <!-- 上课的事件地点添加组件 -->
    <div style="text-align:center;">
      <h3 style="margin:auto;">添加上课的时间和地点</h3>
    </div>
    <hr />
    <el-form
      :model="timePlace"
      status-icon
      :rules="rules"
      ref="timePlace"
      inline-message
      class="timePlace"
    >
      <el-form-item prop="week">
        <span>选择星期：</span>
        <el-button type="text" @click="openWeekList = true">
          <span v-if="timePlace.week!=''">{{timePlace.week}}</span>
          <span v-else>未选择</span>
        </el-button>
      </el-form-item>
      <el-form-item prop="sectionTime">
        <span>选择节次：</span>
        <el-button type="text" @click="openSectionTimeList = true">
          <span
            v-show="timePlace.sectionTime!=''"
            v-for="(sectionTime,index) in timePlace.sectionTime"
            :key="'sectionTime111'+index"
          >{{sectionTime.sectionTime}}、</span>
          <span v-show="timePlace.sectionTime===''">未选择</span>
        </el-button>
      </el-form-item>
      <el-form-item prop="place">
        <span>选择地点：</span>
        <el-button type="text" @click="openPlaceList = true">
          <span v-if="timePlace.place!=''">{{timePlace.place}}</span>
          <span v-else>未选择</span>
        </el-button>
      </el-form-item>
      <el-form-item>
        <span>描述：</span>
        <el-input
          type="textarea"
          autosize
          placeholder="请输入内容"
          v-model="timePlace.sectionDescription"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <span style="width:80%;text-align:center;">
          <el-button type="primary" @click="submitForm('timePlace')">提交</el-button>
          <el-button type="primary" @click="resetForm('timePlace')">重置</el-button>
          <el-button type="primary" @click="close">取消</el-button>
        </span>
      </el-form-item>
    </el-form>
    <!-- 周次星期选择 -->
    <el-dialog title="选择星期" :visible.sync="openWeekList">
      <el-radio-group v-model="timePlace.week">
        <el-radio
          v-for="(week, index) in weekList"
          :key="'week11' + index"
          :label="week.week"
        >{{ week.week }}</el-radio>
      </el-radio-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="timePlace.week=''">清 空</el-button>
        <el-button type="primary" @click="weekSelected">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 节次选择 -->
    <el-dialog title="选择节次" :visible.sync="openSectionTimeList">
      <el-checkbox-group v-model="sectionTimeSelect">
        <el-checkbox
          v-for="(sectionTime, index) in sectionTimeList"
          :key="'sectionTime11' + index"
          :label=" sectionTime"
          style="margin:15px;"
        >{{ sectionTime.sectionTime }}</el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="sectionTimeSelect = '',timePlace.sectionTime=''">清 空</el-button>
        <el-button type="primary" @click="sectionTimeSelected">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 地点选择 -->
  </div>
</template>

<script>
import { valid } from "mockjs";
export default {
  name: "add",
  data() {
    return {
      openWeekList: false, //星期筛选对话框显示
      weekList: [], //星期列表

      //节次
      openSectionTimeList: false, //节次对话框显示
      sectionTimeSelect: [], //节次选择
      sectionTimeList: [], //节次列表

      //地点
      openPlaceList: false, //地点对话框显示
      // placeSelect: "", //地点选择
      placeList: [], //地点列表

      timePlace: {
        week: "",
        sectionTime: "",
        place: "", //上课地点
        sectionDescription: "", //描述
      }, //添加的数据(上课的时间地点)
      rules: {
        week: [
          { required: true, message: "请选择上课星期", trigger: "submit" },
        ],
        sectionTime: [
          { required: true, message: "请选择节次", trigger: "submit" },
        ],
        // place: [
        //   { required: true, message: "请选择上课地点", trigger: "submit" },
        // ],
        sectionDescription: [
          { required: true, message: "请输入课程描述", trigger: "submit" },
        ],
      },
    };
  },
  created() {
    //获取星期列表
    this.getWeekList();
    //获取节次列表
    this.getSectionTimeList();
  },
  methods: {
    //获取星期列表
    getWeekList() {
      this.weekList = [
        { id: "01", week: "星期一" },
        { id: "02", week: "星期二" },
        { id: "03", week: "星期三" },
        { id: "04", week: "星期四" },
        { id: "05", week: "星期五" },
        { id: "06", week: "星期六" },
        { id: "07", week: "星期日" },
      ];
    },

    //获取节次列表
    getSectionTimeList() {
      this.sectionTimeList = [
        { id: "01", sectionTime: "第一节" },
        { id: "02", sectionTime: "第二节" },
        { id: "03", sectionTime: "第三节" },
        { id: "04", sectionTime: "第四节" },
        { id: "05", sectionTime: "第五节" },
        { id: "06", sectionTime: "第六节" },
        { id: "07", sectionTime: "第七节" },
        { id: "08", sectionTime: "第八节" },
        { id: "09", sectionTime: "第九节" },
        { id: "10", sectionTime: "第十节" },
        { id: "11", sectionTime: "第十一节" },
        { id: "12", sectionTime: "第十二节" },
      ];
    },

    //星期选择
    weekSelected() {
      this.openWeekList = false;
    },

    //节次选择
    sectionTimeSelected() {
      this.timePlace.sectionTime = this.sectionTimeSelect;
      this.openSectionTimeList = false;
    },

    //确定添加，检查是否填写完整信息，把上课时间地点信息传回父组件
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //修改成功，返回页面
          this.$emit("lessTimePlace", false, this.timePlace);
        } else {
          return false;
        }
      });
    },

    //重置
    resetForm(formName) {
      this.timePlace.sectionTime = "";
      this.$refs[formName].resetFields();
    },

    //取消
    close() {
      this.$emit("lessTimePlace", false, this.timePlace);
    },
  },
};
</script>

<style scoped>
#container {
  width: 80%;
  margin: auto;
  font-size: 20px;
}
</style>